<template>
  <div class="w detail" v-if="postDetail.id">
    <div class="post_detail">
      <!-- 面包屑 -->
      <div class="post_crumbs">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/post' }">旅游攻略</el-breadcrumb-item>
          <el-breadcrumb-item>攻略详情</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 咔! -->
      <div class="detail_title">
        <h1>{{postDetail.title}}</h1>
      </div>
      <div class="detail_info">
        <span>攻略：2019-05-22 10:57</span>
        <span>阅读：14645</span>
      </div>
      <div class="detail_main" v-html="postDetail.content"></div>
      <!-- 评论递归组件 -->
      <div class="comment">
        <p class="comment_title">评论</p>
        <!-- @ 回复模块 -->
        <div class="comment_reply_demo" v-if="replyInfo.id">
          <span>回复</span>
          <span class="reply_nickname">@ {{replyInfo.account.nickname}}</span>
          <i @click="replayDemoEmpty " class="el-icon-close"></i>
        </div>
        <!-- 文本域elment -->
        <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="commentTextarea"></el-input>
        <!-- 文本域elment -->
        <div class="comment_choice">
          <!-- 图片上传 -->
          <!-- :headers="{ Authorization:('Bearer ' + $store.state.user.userInfo.token) }" -->
          <!-- name=上传的文件字段名 -->
          <el-upload
            :action="$axios.defaults.baseURL+'/upload'"
            name="files"
            list-type="picture-card"
            :file-list="fileListImg"
            ref="fileListRef"
            :on-remove="handleRemove"
            :on-success="handlSuccess"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog>
            <!-- 显示即将上传的图片 -->
            <img width="100%" alt />
          </el-dialog>
          <!-- 图片上传 -->
          <!-- 提交按钮 -->
          <el-button type="primary" @click="commentSubmit">提交</el-button>
          <!-- 提交按钮 -->
        </div>
        <div class="comment_list" v-if="commentList.length>0">
          <comment
            v-for="(item,index) of pageComment"
            :key="index"
            :comment="item"
            @replyWho="replyWho"
          ></comment>
        </div>
      </div>
      <!-- 评论递归组件 -->
      <!-- 分页器组件 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[2, 4, 6, 8]"
        :page-size="sizePage"
        layout="total, sizes, prev, pager, next, jumper"
        :total="commentTotal"
      ></el-pagination>
      <!-- 分页器组件 -->
    </div>
    <!-- 相关攻略组件 -->
    <div class="post_correlation">
      <h4>相关攻略</h4>
      <div v-if="correlationList.length > 0" class="correlation_main">
        <correlation v-for="(item,index) of correlationList" :key="index" :correlation="item"></correlation>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import correlation from "../../components/post/correlation";
import comment from "../../components/post/comment/comment";
export default {
  data() {
    return {
      // 详情数据
      postDetail: {},
      // 相关攻略列表
      correlationList: [],
      // 评论列表
      commentList: [],
      commentTotal: 0,
      // 图片上传
      fileListImg: [],
      // dialogVisible: false,
      // 分页器
      currentPage: 1,
      sizePage: 2,
      // 文本域内容
      commentTextarea: "",
      // 回复内容
      replyInfo: {}
    };
  },
  methods: {
    // 获取文章
    getPost() {
      this.$axios({
        method: "get",
        url: "/posts/" + this.$route.query.id
      }).then(res => {
        const { data } = res;
        this.postDetail = data;
        // console.log("data: ", data);
      });
    },
    // 相关推荐攻略
    getCorrelation() {
      this.$axios({
        method: "get",
        url: "/posts/recommend",
        params: {
          id: this.$route.query.id
        }
      }).then(res => {
        const { data } = res.data;
        this.correlationList = data;
        // console.log("data: ", data);
      });
    },
    // 获取评论
    getComments() {
      this.$axios({
        method: "get",
        url: "/posts/comments",
        params: {
          // 文章id
          post: this.$route.query.id,
          // 条数
          _limit: this.sizePage,
          _start: this.currentPage - 1
        }
      }).then(res => {
        // console.log('res: ', res);
        const { data, total } = res.data;
        this.commentList = data;
        this.commentTotal = total;
        console.log("data: ", data);
      });
    },
    // 图片上传
    handlSuccess(response, file, fileList) {
      // console.log('response.data: ', response[0]);
      const { url, id } = response[0];
      // // ! 图片地址
      // 当前文件添加数据
      file.id = id;
      console.log("新增 id: ", id);
      // // 动态url
      // file.url = url;
      file.url = this.$axios.defaults.baseURL + url;
      this.fileListImg.push(file);
      // console.log('this.fileListImg: ', this.fileListImg);
    },
    handleRemove(file, fileList) {
      const index = this.fileListImg.findIndex(item => {
        return item.id == file.id;
      });
      this.fileListImg.splice(index, 1);
      // console.log('this.fileListImg: ', this.fileListImg);
    },
    // 分页器
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.sizePage = val;
      this.getComments();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.getComments();
    },
    // 评论提交
    commentSubmit() {
      console.log(this.commentTextarea);
      const content = {};
      // 评论内容
      content.content = this.commentTextarea;
      // 图片列表
      content.pics = this.fileListImg;
      // 文章id
      content.post = this.$route.query.id;
      // console.log("content: ", content);
      // 判断是否有回复的id
      if (this.replyInfo.id) {
        content.follow =this.replyInfo.id
      }
      this.$axios({
        method: "post",
        url: "/comments",
        headers: {
          "Content-Type": "application/json",
          Authorization: "Bearer " + this.$store.state.user.userInfo.token
        },
        data: content
      }).then(res => {
        // console.log('提交评论',res.data.message);
        this.$message.success(res.data.message);
        this.getComments();
        // 清空
        this.commentTextarea = "";
        // 清空已上传的文件列表（该方法不支持在 before-upload 中调用）
        this.$refs.fileListRef.clearFiles();
        // console.log('this.fileListImg: ', this.fileListImg);
        this.fileListImg = [];
      });
    },
    // 回复
    replyWho(obj) {
      console.log("最外层回复", obj);
      this.replyInfo = obj;
    },
    // 回复清空
    replayDemoEmpty() {
      this.replyInfo = {};
    }
  },
  mounted() {
    this.getPost();
    this.getCorrelation();
    this.getComments();
    // setTimeout(() => {
    // this.$store.state.user.userInfo.token
    //   console.log('this.$store.state.user.userInfo.token: ', this.$store.state.user.userInfo.token);
    // }, 3000);
  },
  computed: {
    pageComment() {
      // const start = (this.currentPage - 1) * this.sizePage;
      // const end = start + this.sizePage;
      // console.log("arr ", this.commentList.slice(start, end));
      return this.commentList;
    },
    // 时间函数
    timeYears() {
      // const years = moment(this.correlation.created_at).format("YYYY-MM-DD");
      // return years;
    },
    timeMinute() {
      // const minute = moment(this.correlation.created_at).format("HH:mm");
      // return minute;
    }
  },
  components: {
    correlation,
    comment
  }
};
</script>

<style lang="less" scoped>
.detail {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}
.post_detail {
  width: 700px;
  // 面包屑
  .post_crumbs {
    padding: 0 10px 20px;
  }
  .detail_title {
    padding-bottom: 20px;
    border-bottom: 1px solid #dddddd;
  }
  .detail_info {
    text-align: right;
    color: #999999;
    margin: 20px 0;
    span {
      padding: 0 10px;
    }
  }
  .detail_main {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    /deep/ img {
      width: 100%;
    }
  }
}
.post_correlation {
  width: 280px;
  h4 {
    font-size: 18px;
    font-weight: 400;
    padding-bottom: 10px;
    // border-bottom: 1px solid #ddd;
  }
  // 遍历的组件外层
  .correlation_main {
    border-bottom: 1px solid #dddddd;
  }
}
// 评论
.comment {
  .comment_title {
    padding: 15px 0;
    font-size: 18px;
  }
  // 文本域
  /deep/ .el-textarea {
    /deep/ textarea {
      resize: none;
    }
  }
  // 回复 @ ???
  .comment_reply_demo {
    display: inline-block;
    margin-bottom: 20px;
    // width: 70px;
    height: 32px;
    line-height: 32px;
    background: #f4f4f5;
    border-radius: 5px;
    font-size: 12px;
    color: #999;
    position: relative;
    .el-icon-close {
      font-size: 14px;
      cursor: pointer;
      position: absolute;
      right: 4px;
      top: 50%;
      transform: translateY(-50%);
    }
    span {
      padding-left: 8px;
    }
    .reply_nickname {
      color: orange;
      padding: 0 20px 0 10px;
    }
  }
  .comment_choice {
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
    // 图片上传
    /deep/ .el-upload {
      width: 100px;
      height: 100px;
      // 小十字
      /deep/ .el-icon-plus {
        transform: translateY(-17px);
      }
    }
    // 图片上传
    /deep/ .el-upload-list__item {
      margin: 0 10px;
      width: 100px;
      height: 100px;
      /deep/ img {
        width: 100%;
        height: 100%;
      }
    }
    // 提交按钮
    /deep/ .el-button {
      width: 56px;
      height: 28px;
      padding: 0;
    }
  }
  .comment_list {
    padding: 15px 22px;
    border: 1px solid #dddddd;
  }
}
</style>